<template>
	<fixtitletopVue>
		<template #l>
			<view class="fixrtop-l" @click="back">
				<view class="iconfont icon-jiantou"></view>
			</view>
		</template>
		<template #c>
			<view class="fixtop-c">
				店铺详情
			</view>
		</template>
	</fixtitletopVue>
	<view class="conbox" v-if="shopperdata">
		<view class="logo-tit">
			<view class="logo-tit-l">
				<image :src="'http://127.0.0.1:3006'+shopperdata.img" mode="aspectFill"></image>
			</view>
			<view class="logo-tit-r">
				<view class="logo-tit-r-t">
					花甲粉(信阳学院校内店)
				</view>
				<view class="logo-tit-r-b">
					4.5分
				</view>
			</view>
		</view>
		<view class="addressbox">
			<view class="addressbox-l">
				<view class="iconfont icon-dizhi"></view>
				<view class="address">
					{{shopperdata.address}}{{shopperdata.xxaddress}}
				</view>
			</view>
			<view class="addressbox-r">
				<view class="iconfont icon-dianhua" @click="callphone"></view>
			</view>
		</view>
		<view class="addressbox" style="border-radius: 0 0 15rpx 15rpx;">
			<view class="addressbox-l">
				<view class="iconfont icon-dizhi"></view>
				<view class="address fw">
					已进入商品安全档案
				</view>
			</view>
			<view class="addressbox-r" style="border: none;">
				<!-- <view class="iconfont icon-jiantou r180" style="font-size: 25rpx;"></view> -->
			</view>
		</view>
		<view class="addressbox"  style="margin-top: 20rpx;border-radius:15rpx 15rpx 0 0 ;" >
			<view class="addressbox-l">
				<view class="iconfont icon-dizhi"></view>
				<view class="address">
					<text class="fw">配送服务</text>：<text style="font-weight:0;">由商家提供配送服务</text>
				</view>
			</view>
			<view class="addressbox-r" style="border: none;">
			</view>
		</view>
		<view class="addressbox" style="border-radius: 0 0 15rpx 15rpx;">
			<view class="addressbox-l">
				<view class="iconfont icon-dizhi"></view>
				<view class="address">
					<text class="fw">配送时间</text>：<text style="font-weight:0;">16:00-21:00</text>
				</view>
			</view>
			<view class="addressbox-r" style="border: none;">
			</view>
		</view>
		<view class="addressbox" style="border-radius: 15rpx;margin-top: 20rpx;">
			<view class="addressbox-l">
				<view class="iconfont icon-dizhi"></view>
				<view class="address">
					<text class="fw">商家公告</text>：<text style="font-weight:0;">
					 新店开业，优惠多多~校内店，
					 </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import {
		getstatusheight,
		gettitleheight
	} from "@/util/getsysinfo.js"
	const shopperdata=ref()
	onLoad(e=>{
		shopperdata.value=JSON.parse(e.shoperdata)
	})
	const heights = gettitleheight() + getstatusheight() + 'px'
	const back = () => {
		uni.navigateBack()
	}
	const callphone=()=>{
		uni.makePhoneCall({
			phoneNumber:shopperdata.value.phone
		})
	}
</script>

<style lang="scss" scoped>
	.fw {
		font-weight: 700 !important;
	}

	.r180 {
		transform: rotate(180deg);
	}

	.conbox {
		height: calc(100vh - v-bind(heights));
		width: 100%;
		background-color: #eee;
		padding: 20rpx;

		.addressbox {
			height: 100rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 0 0 20rpx;

			.addressbox-l {
				flex: 1;
				display: flex;
				align-items: center;
				gap: 25rpx;

				.iconfont {
					font-size: 25rpx;
				}

				.address {
					width: 500rpx;
					height: 100%;
					overflow: hidden;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.addressbox-r {
				width: 80rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 1rpx solid #7b7b7b;

				.iconfont {
					font-size: 30rpx;
					font-weight: 700;
				}
			}
		}

		.logo-tit {
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 15rpx 15rpx 0 0;
			display: flex;
			gap: 10rpx;

			.logo-tit-l {
				width: 150rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					height: 110rpx;
					width: 110rpx;
					border-radius: 20rpx;
				}
			}

			.logo-tit-r {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 15rpx;

				.logo-tit-r-t {
					font-size: 32rpx;
					font-weight: 700;
				}

				.logo-tit-r-b {
					font-size: 22rpx;
					color: #f2b34c;
				}
			}
		}
	}

	.fixrtop-l,
	.fixtop-c {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.fixtop-c {
		justify-content: center;
		font-size: 33rpx;
	}

	.fixrtop-l {
		padding-left: 20rpx;

		.iconfont {
			font-size: 25rpx;
		}
	}
</style>